<template>
	<app-layout>

		<!-- 顶部自定义导航 -->

		<view class="top-backgroup">
			<image src="/static/my-bg4.png" mode='widthFix' class='backgroud-image'></image>
		</view>

		<view class="about__wrap" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
			<!-- 图标logo/头像 -->
			<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom" style="margin-top: -450rpx;"
				@click="tn('/minePages/info')">
				<view class="justify-content-item">
					<view class="tn-flex tn-flex-col-center tn-flex-row-left" v-if="userinfo">
						<view>
							<u-avatar :text="userinfo.FstaffName[0]" fontSize="18" :size="50" randomBgColor></u-avatar>
						</view>
						<view class="tn-padding-right">
							<view class="tn-padding-right tn-padding-left-sm">
								<text class="tn-color-cat  tn-text-bold">{{userinfo.FstaffName}} </text>
							</view>
							<view class="tn-padding-right tn-padding-top-xs tn-padding-left-sm tn-text-ellipsis">
								<text class="">{{userinfo.FUserGroup}}</text>
							</view>
						</view>
					</view>

				</view>
				<view class="timer">
					{{nowTime}}
				</view>
			</view>



			<!-- 更多信息-->
			<view class="about-shadow  ">
				<tn-list-cell :hover="true" :radius="true" @click="tn('/minePages/info')">
					<view class="tn-flex tn-flex-col-center">
						<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center"
							style="color: #2074d4;">
							<view class="tn-icon-my-circle-fill"></view>
						</view>
						<view class="tn-margin-left-sm tn-flex-1">我的信息</view>
						<view class="tn-color-gray tn-icon-right"></view>
					</view>
				</tn-list-cell>
				<tn-list-cell :hover="true" :radius="true" @click="tn('/mes/print')">
					<view class="tn-flex tn-flex-col-center">
						<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center"
							style="color: #2074d4;">
							<view class="tn-icon-message-fill"></view>
						</view>
						<view class="tn-margin-left-sm tn-flex-1">打印机配置</view>
						<view class="tn-color-gray tn-icon-right"></view>
					</view>
				</tn-list-cell>
				<tn-list-cell :hover="true" :radius="true" @click="loginout">
					<view class="tn-flex tn-flex-col-center">
						<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center"
							style="color: #2074d4;">
							<text class="tn-icon-close-fill"></text>
						</view>
						<view class="tn-margin-left-sm tn-flex-1">退出登陆</view>
						<view class="tn-color-gray tn-icon-right"></view>
					</view>
				</tn-list-cell>
			</view>
		</view>

		<view class='tn-tabbar-height'></view>

		<bar :currentIndex="1"></bar>
	</app-layout>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from "vuex";




	export default {
		name: 'Mine',
		data() {
			return {
				src: '',
				nowTime: this.$utils.datetime('Y-m-d h:i:s'),
				timer: ''
			}
		},
		computed: {
			...mapState({
				userinfo: state => state.userinfo,
			})

		},

		onShow() {
			console.log('onShow')
			if (!this.userinfo) this.$user.getInfo()
			this.getNow()
		},

		onHide() {
			clearInterval(this.timer)
		},
		methods: {
			getNow() {
				let that = this;
				this.timer = setInterval(() => {
					that.nowTime = that.$utils.datetime('Y-m-d h:i:s')
				}, 1000)
			},
			// 跳转
			tn(e) {
				uni.navigateTo({
					url: e,
				});
			},
			loginout() {
				let t = this;
				uni.showModal({
					title: '提示',
					content: '确定退出吗',
					success: function(res) {
						if (res.confirm) {
							t.$user.loginout()
						}
					}
				});

			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 底部安全边距 start*/
	.tn-tabbar-height {
		min-height: 120rpx;
		height: calc(140rpx + env(safe-area-inset-bottom) / 2);
		height: calc(140rpx + constant(safe-area-inset-bottom));
	}

	.timer {
		font-size: 16px;
		font-weight: bold;
		padding-right: 10px;
		background: linear-gradient(278.83deg, #0062ff 31.42%, #013789 75.55%);
		background-clip: text;
		-webkit-background-clip: text;
		color: transparent;
	}

	.tn-color-cat {
		color: #1D2541;
	}

	.tn-bg-cat {
		background-color: #1D2541;
	}


	/* 自定义导航栏内容 start */
	.custom-nav {
		height: 100%;

		&__back {
			margin: auto 5rpx;
			font-size: 40rpx;
			margin-right: 10rpx;
			flex-basis: 5%;
			width: 100rpx;
			position: absolute;
		}
	}

	/* 自定义导航栏内容 end */


	/* 顶部背景图 end */


	/* 用户头像 start */
	.logo-image {
		width: 110rpx;
		height: 110rpx;
		position: relative;
		overflow: hidden;
		border-radius: 50%;
	}

	.logo-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border: 8rpx solid rgba(255, 255, 255, 0.05);
		box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 50%;
		overflow: hidden;
		// background-color: #FFFFFF;
	}

	/* 页面 start*/
	.about-shadow {
		border-radius: 15rpx;
		box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
		margin-top: 150rpx;
	}

	.about {

		&__wrap {
			position: relative;
			z-index: 1;
			margin: 50rpx 20rpx 20rpx 20rpx;
		}
	}

	/* 页面 end*/


	/* 图标容器1 start */
	.icon1 {
		&__item {
			// width: 30%;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			padding: 30rpx;
			margin: 20rpx 10rpx;
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 40rpx;
				height: 40rpx;
				font-size: 40rpx;
				border-radius: 50%;
				position: relative;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;
				}
			}
		}
	}

	/* 图标容器1 end */


	/* 顶部背景图 start */
	.top-backgroup {
		height: 450rpx;
		z-index: -1;

		.backgroud-image {
			width: 100%;
			height: 450rpx;
			// z-index: -1;
		}
	}

	/* 顶部背景图 end */
</style>